<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>作业</title>
        <style>
            *{
                padding: 0px;
                margin: 0px;
                list-style: none;
            }
            .header{
   
                height: 66px;
                margin: 0px auto;
                background-color: plum;
            }

            .header li{
                float: right;
            }
         
            .banner {
                width: 1212px;
                height: 513px;
                margin: 26px auto;
              background-color: gray;
            }
            .banner img {
                width: 907px;
                height: 513px;
                float: left;

            }
            .head img{
                width: 291px;
                height: 161px;
                margin: 0px auto 14px 14px;
            }
            .con{
                width: 1210px;
                height: 36px;
                margin: 25px auto 25px ;
                background-color: antiquewhite;
            }
            .con li{
                width: 131px;
                height: 36px;
                margin: 0px auto 18px 0px;
                float: left;
            }
            .foot{
                width: 1209px;
                height: 965px;
                margin: 0px auto;
                
            }
           .foot abc{
               float: left;
             
            
           }
           .div abc ,p{
               position: absolute;bottom: 0px;color: brown;
           }
         .div acb li{
               position: absolute;bottom: 0px;color: burlywood;
           }
            .more{
            width: 1211px;
            height: 35px;
            background-color: green;
            margin: 25px auto  25px;
            }
            .more li{
           margin: 0px auto;   
           text-align: center; 
        }
            
        </style>
    </head>
    <body> 
    <div class="header">    
        <p>三</p>
        <li>登录</li>
    </div>
    <div class="banner">
        <img src="images/s003.jpg" alt="">
        <div class="head">
            <img src="images/s02.jpg"  alt="">
           
            <img src="images/s03.jpg" alt="">
            <img src="images/s04.jpg" alt="">
        </div>
    </div>
    <div class="con">
        <ul>
            <li><select name="最新" id="">
                <option value="最热">最热</option>
            </select></li>
            <li><select name="最新" id="">
                <option value="最新">最新</option>
            </select></li>
            <li><select name="最新" id="">
                <option value="热议">热议</option>
            </select></li>
            <li><select name="最新" id="">
                <option value="随机">随机</option>
            </select></li>
        </ul>
    </div>
    <div class="foot">
        <div class="pictu"></div><ul>
        <div class="abc">
            <img id= "abc"  al src="images/i01.jpg" alt="" width="293px" height="314px" >
            <p></p>
        </div>
        <div class="acb">
            <img id="acb"src="images/i02.jpg" alt="" width="293px" height="314px" >
            <li></li>
        </div>
    </div>
            
        </ul>
    </div>
    <div class="more">
        <ul>
            <li>你滑的太快啦 请慢慢看</li>
        </ul>
    </div>
        
    </body>
</html>